<template>

  <div class="container">
    <div class="card">
      <div style="height: 68%;display: flex;">
        <div class="littlecontainer" style="flex:1 1 600px">
          <div class="title">Code39码生成</div>
          <!-- <div style="display: flex; align-items: center; justify-content: left;">
            <ul class="button-list">
              <li :class="'button-item ' + (obj.isSelect ? 'button-item-sel' : '')" @mouseover="handleMouseOver(index)"
                @mouseleave="handleMouseLeave(index)" @click="selectItem(index)" v-for="(obj, index) in qrNameList"
                :key="index">
                {{ obj.name }}
              </li>
            </ul>
          </div> -->
          <textarea placeholder="请输入条码内容" rows="5" id="qrInfo" v-model="qrInfo" class="text"></textarea>
          <MButton @click="generateCode">生成</MButton>
        </div>
        <div class="littlecontainer" style="flex:0 0 450px;margin-left: 15px;">
          <div style="display: flex;justify-content: center;" ref="canvas">
            <svg ref="canvasi"
              style="border: 1px solid #e2e2e2;width: 300px;height: 300px;background: white;padding: 20px;"></svg>
          </div>
          <div class="divider">
            <span>保存图片</span>
          </div>
          <div style="display: flex;align-items: center;margin-top: 20px;">
            <div style="width: 80px;">图片格式：</div>
            <div style="flex:1 1 180px">
              <MButton class="imgType" @click="downloadCode('png')">PNG</MButton>
              <MButton class="imgType" @click="downloadCode('jpg')">JPG</MButton>
              <!-- <MButton class="imgType" @click="downloadCode('svg')">SVG</MButton> -->
            </div>

          </div>
        </div>
      </div>
      <div style="height: 32%;margin-top: 15px;min-height: 280px;" class="littlecontainer">
        <div style="display: flex;">
          <div class="title" style="flex: 1 1 120px;">条码识别</div>
          <div style="flex: 1 1 120px;display: flex;align-items: center;justify-content: right;">
            <MButton style="width: 100px;margin-left: 30px;" @click="handleUploadClick">上传识别</MButton>
          </div>
        </div>
        <div style="min-height: 220px;">
          <table border="1" style="width: 100%; ">
            <thead>
              <tr>
                <th style="width: 5%;text-align: center;">序号</th>
                <th style="width: 15%;text-align: center;">图片名称</th>
                <th style="width: 10%;text-align: center;">解码状态</th>
                <th style="width: 60%;">解码结果</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in decodedResults" :key="index">
                <td style="width: 5%;">{{ index + 1 }}</td>
                <td style="width: 15%;">{{ item.imageName }}</td>
                <td style="width: 10%;">{{ item.status }}</td>
                <td style="width: 70%;">{{ item.decodeResult }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <input type="file" @change="handleFileChange" accept="image/*" style="display: none" />
      </div>
    </div>
  </div>
</template>

<script>
import MButton from '../components/MButton.vue'
//import MInput from '../components/MInput.vue'
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import JsBarcode from "jsbarcode";
import { BrowserMultiFormatReader } from '@zxing/library';
export default {
  name: 'QrDestroy',
  props: {
    msg: String
  },
  components: {
    MButton,
    //MInput
  },

  setup() {

    const decodedResults = ref([]);
    const canvasi = ref(null)
    const canvas = ref(null)
    const qrInfo = ref("HELLO123")

    const downloadCode = (type) => {
      const tableElement = canvas.value; // 获取 table 元素
      html2canvas(tableElement, { scale: 2, }).then((canvas) => {
        // 将 canvas 转换为图片数据 URL
        const dataURL = canvas.toDataURL('image/png');

        // 创建下载链接并模拟点击
        const link = document.createElement('a');
        link.href = dataURL;
        link.download = `CODE39.${type}`;
        link.click();
      });

    }


    const generateCode = () => {
      try {
        JsBarcode(canvasi.value, qrInfo.value, { format: "CODE39" });

      } catch (e) {
        alert(e)
      }
    }
    const handleUploadClick = () => {
      const fileInput = document.querySelector('input[type="file"]');
      if (fileInput) {
        fileInput.click();
      }
    };
    const handleFileChange = async (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = () => {
          const image = new Image();
          image.src = reader.result;
          image.onload = async () => {
            try {
              const codeReader = new BrowserMultiFormatReader();
              const decodeResult = await codeReader.decodeFromImageElement(image);
              decodedResults.value.push({
                imageName: file.name,
                status: '成功',
                decodeResult: decodeResult.text,
              });
            } catch (err) {
              decodedResults.value.push({
                imageName: file.name,
                status: '失败',
                decodeResult: err.message,
              });
            }
          };
        };
        reader.readAsDataURL(file); // 读取文件为 DataURL

      }
    };

    return {
      canvas,
      decodedResults,
      canvasi,
      qrInfo,
      downloadCode,
      generateCode,
      handleUploadClick,
      handleFileChange,
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  margin-bottom: 10px;
  text-align: left;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 750px;

}

.card {
  width: 90%;
  height: calc(100% - 100px);
  /* background: green; */
  /* box-shadow: 0 8px 12px rgba(49, 49, 49, 0.3); */
  border-radius: 5px;
  padding: 20px 20px 0 20px;
  /* background-color: white; */
  transition: box-shadow 0.3s ease;
  text-align: left;

}

.littlecontainer {
  background-color: white;
  border-radius: 10px;
  border: 1px solid #b6b6b69d;
  box-shadow: 0 8px 12px rgba(49, 49, 49, 0.3);
  padding: 20px;
}

.button-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.button-item {
  height: 40px;
  line-height: 40px;
  margin-right: 40px;
  color: #747474;
  cursor: pointer;
  box-sizing: border-box;
}

.button-item-sel {
  border-bottom: 2px solid black;
  color: black;
}

.text {
  width: calc(100% - 20px);
  background: #F2F3F5;
  border: none;
  font-size: 12px;
  margin-bottom: 15px;
  padding: 10px;
  margin-top: 30px;
  border-radius: 5px;
}


.divider {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  position: relative;
  margin: 10px 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-top: 1px dashed #000;
  /* 设置分割线样式 */
}

.divider span {
  padding: 0 10px;
  /* 控制文字与分割线的间距 */
  background-color: white;
  /* 防止文字被分割线覆盖 */
  z-index: 1;
  /* 确保文字在分割线之上 */
}

.imgType {
  background: white;
  color: black;
  border: 1px solid #e2e2e2;
  width: 60px;
  margin: 0 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table {
  border: none;
  margin-top: 20px;
}

th {
  border-right: 2px solid white;
  background-color: #f5f5f5;
  padding: 8px;
  text-align: left;
}

td {
  border: none;
  padding: 8px;
  text-align: left;
  border-right: 2px solid rgb(230, 230, 230);
}


::-webkit-scrollbar-thumb {
  background-color: #8d8c8c9d
}
</style>
